<template>
	<view>
		<view class="top" :style="`padding-top: ${$Height() - 30}px;`">
			<view class="top_box">
				<view class="top_box_left">
					<image class="top_box_left_img" src="/static/30.png" mode="" @click="$fh"></image>
					<view class="top_box_left_box" @click="to_index">
						<image class="top_box_leftt_box_img" src="/static/83.png" mode=""></image>
						返回用户端
					</view>
				</view>
				<view class="top_box_title">首页</view>
				<view class="top_box_right" :style="`width: ${$Width() + 15}px;`"></view>
			</view>
			<image class="top_img" src="/static/29.png" mode=""></image>

			<view class="info">
				<image class="info_left" :src="wode.photo" mode=""></image>
				<view class="info_right">
					<view class="info_right_top">
						<view class="info_right_top_left">{{ wode.name }}</view>
						<view class="info_right_top_right">
							<image class="info_right_top_right_img" src="/static/16.png" mode="" @click="to_info"></image>
						</view>
					</view>
					<view class="info_right_btn">
						<image class="info_right_btn_img" src="/static/84.png" mode=""></image>
						平台抽佣 {{ wode.bili }}%
					</view>
				</view>
			</view>
		</view>

		<view class="con">
			<view class="box">
				<view class="box_top">
					<view class="box_top_left">我的收入(元)</view>
					<view class="box_top_right" @click="to_income">
						收入明细
						<image class="box_top_right_img" src="/static/28.png" mode=""></image>
					</view>
				</view>
				<view class="box_nr">
					<view class="box_nr_item">
						<view class="box_nr_item_title">收入余额</view>
						<view class="box_nr_item_num">{{ wode.balance }}</view>
					</view>
					<view class="box_nr_item">
						<view class="box_nr_item_title">总收入</view>
						<view class="box_nr_item_num">{{ wode.ljbalance }}</view>
					</view>
					<view class="box_nr_item">
						<view class="box_nr_item_title">已提现收入</view>
						<view class="box_nr_item_num">{{ wode.tixian }}</view>
					</view>
					<view class="box_nr_item">
						<view class="box_nr_item_btn" @click="to_withdrawal">申请提现</view>
					</view>
				</view>
			</view>

			<view class="list">
				<view class="list_nr">
					<view class="list_nr_left">今日订单</view>
					<view class="list_nr_right">{{ wode.jinridingdan }}</view>
				</view>
				<view class="list_nr">
					<view class="list_nr_left">总订单数</view>
					<view class="list_nr_right">{{ wode.zongdingdan }}</view>
				</view>
				<view class="list_nr">
					<view class="list_nr_left">今日收入</view>
					<view class="list_nr_right text1">¥{{ wode.jinrishouru }}</view>
				</view>
				<view class="list_nr">
					<view class="list_nr_left">总收入</view>
					<view class="list_nr_right text1">¥{{ wode.zongshouru }}</view>
				</view>
				<view class="list_nr">
					<view class="list_nr_left">房源总数</view>
					<view class="list_nr_right">{{ wode.fyzongshu }}</view>
				</view>
				<view class="list_nr">
					<view class="list_nr_left">上架房源</view>
					<view class="list_nr_right">{{ wode.fyshangjia }}</view>
				</view>
				<view class="list_nr">
					<view class="list_nr_left">今日入住率</view>
					<view class="list_nr_right">{{ wode.ruzhulv }}%</view>
				</view>
			</view>
		</view>

		<TabBar :type="2" :index="1"></TabBar>
	</view>
</template>

<script setup>
	const http = inject('$http')
	let wode = ref({})
	const indexlist = async () => {
		await http.post('/srapi/keyuan/wode').then((res) => {
			console.log('房东', res)
			wode.value = res.data
		})
	}

	onShow(() => {
		indexlist()
	})
	const to_index = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	const to_info = () => {
		uni.navigateTo({
			url: '/pages_B/info/info'
		})
	}
	const to_withdrawal = () => {
		uni.navigateTo({
			url: '/pages_B/withdrawal/withdrawal'
		})
	}
	const to_income = () => {
		uni.navigateTo({
			url: '/pages_B/income/income'
		})
	}
</script>

<style lang="less" scoped>
	.top {
		width: 750rpx;
		padding: 30rpx;
		box-sizing: border-box;
		.top_box {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 10rpx;
			.top_box_left {
				display: flex;
				align-items: center;
				position: relative;
				z-index: 2;
				.top_box_left_img {
					width: 17rpx;
					height: 30rpx;
					margin-right: 30rpx;
				}
				.top_box_left_box {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 190rpx;
					height: 60rpx;
					background: rgba(255, 255, 255, 0.8);
					border: 1rpx solid #d4d4d4;
					border-radius: 31rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
					letter-spacing: -0.43rpx;
					.top_box_leftt_box_img {
						width: 26rpx;
						height: 26rpx;
						margin-right: 5rpx;
					}
				}
			}
			.top_box_title {
				position: absolute;
				z-index: 1;
				width: 750rpx;
				left: -30rpx;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				font-weight: 500;
				color: #000000;
			}
		}

		.top_img {
			width: 750rpx;
			height: 520rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		.info {
			padding: 20rpx 0;
			position: relative;
			z-index: 9;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.info_left {
				width: 102rpx;
				height: 102rpx;
				border: 2rpx solid #ffffff;
				border-radius: 50%;
				margin-right: 30rpx;
			}
			.info_right_text {
				font-size: 36rpx;
				font-weight: 700;
				color: #000000;
			}
			.info_right {
				flex: 1;
				.info_right_top {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 23rpx;
					.info_right_top_left {
						font-size: 36rpx;
						font-weight: 700;
						color: #000000;
						display: flex;
						align-items: center;
						.info_right_top_left_img {
							width: 90rpx;
							height: 38rpx;
							margin-left: 10rpx;
						}
					}
					.info_right_top_right {
						display: flex;
						align-items: center !important;
						.info_right_top_right_img {
							width: 37rpx;
							height: 36rpx;
							margin-left: 30rpx;
						}
						.info_right_top_right_button {
							padding-top: 10rpx;
						}
					}
				}
				.info_right_btn {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
					.info_right_btn_img {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.top_zw {
			position: relative;
			z-index: 9;
			width: 690rpx;
			height: 124rpx;
		}
	}

	.con {
		position: relative;
		z-index: 9;
		padding: 0 30rpx;
	}
	.box {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 30rpx;
		margin-bottom: 18rpx;
		.box_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			border-bottom: 1px solid #e4e5ed;
			margin-bottom: 20rpx;
			.box_top_left {
				font-size: 24rpx;
				font-weight: 700;
				color: #000000;
			}
			.box_top_right {
				font-size: 20rpx;
				font-weight: 500;
				color: #787878;
				.box_top_right_img {
					width: 7rpx;
					height: 12rpx;
				}
			}
		}
		.box_nr {
			display: grid;
			/*等额 分成 1fr份*/
			grid-template-columns: 1fr 1fr;
			/*行间距 列间距*/
			grid-gap: 20px 20px;
			.box_nr_item {
				.box_nr_item_title {
					font-size: 24rpx;
					font-weight: 500;
					color: #787878;
					margin-bottom: 20rpx;
				}
				.box_nr_item_num {
					font-size: 36rpx;
					font-weight: 700;
					color: #000000;
				}
				.box_nr_item_btn {
					width: 200rpx;
					height: 72rpx;
					background: #3475f3;
					border-radius: 36rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					font-weight: 700;
					color: #fffefe;
				}
			}
		}
	}

	.list {
		background: #ffffff;
		border-radius: 24rpx;
		padding: 15rpx 30rpx;
		.list_nr {
			display: flex;
			/* 内容左对齐 | 内容右对齐 | 居中对齐 | 内容平均分 | 内容两侧距离相等 */
			/* justify-content: flex-start | flex-end | center | space-between | space-around */
			justify-content: space-between;
			/* 内容上方对齐 | 内容下方对齐 | 居中对齐 | 内容平均分 | 内容两侧距离相等 */
			/* align-items: flex-start | flex-end | center | baseline | stretch */
			align-items: center;
			padding: 15rpx 0;
			.list_nr_left {
				font-size: 24rpx;
				font-weight: 700;
				color: #000000;
			}
			.list_nr_right {
				font-size: 24rpx;
				font-weight: 500;
				color: #000000;
			}
			.text1 {
				color: #e93424;
			}
			.text1 {
				color: #3475f3;
			}
		}
	}

	//
</style>
